import React, { useState } from 'react'
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import { useLocation, useNavigate } from 'react-router-dom'

export default function Tabbars() {

    /* 标签栏数据 */
    let tabbarlist = [
        { title: '首页', path: '/home', icon: <HomeO /> },
        { title: '分类', path: '/fenlei', icon: <HomeO /> },
        { title: '米圈', path: 'mi', icon: <HomeO /> },
        { title: '购物车', path: 'car', icon: <HomeO /> },
        { title: '我的', path: 'my', icon: <HomeO /> },
    ]

    let location = useLocation()
    let navigate = useNavigate()
    let [change, setchange] = useState(location.pathname)

    const gaoliang = () => {
        let nan = location.pathname
        if (nan.startsWith('/home')) {
            return '/home'
        }
        return nan
    }


    return (
        <div>
            <div className='demo-tabbar'>
                {/* 标签栏组件 */}
                <Tabbar value={gaoliang()} onChange={(e: any) => {
                    navigate(e) //跳转
                    setchange(e) //高亮
                }}>
                    {/* 渲染标签栏 */}
                    {
                        tabbarlist.map((item: any) => {
                            return (
                                <Tabbar.Item name={item.path} icon={item.icon}>{item.title}</Tabbar.Item>
                            )

                        })
                    }
                </Tabbar>
            </div>
        </div>
    )
}
